<template>
	<div>
		<!--头部行表单 ：搜索 导出 -->
		<div class="filter-container">
			<el-input v-model="query.keyword" placeholder="搜索用户" style="width: 200px;" @keyup.enter.native="handleSearch" />
			<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
			<el-button :loading="exportLoading" type="primary" :icon="Switch" @click="handleExport">导出</el-button>
		</div>

		<!-- 数据列表  删除 -->
		<div class="list-container">
			<el-table :data="dataList" border fit highlight-current-row style="width: 100%;">
				<el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>
				<el-table-column prop="addressName" label="收货人"></el-table-column>
				<el-table-column prop="addressTel" label="电话"></el-table-column>
				<el-table-column prop="addressDetail" label="地址"></el-table-column>
				<el-table-column prop="status" label="状态"></el-table-column>
				<el-table-column prop="createTime" label="下单时间"></el-table-column>
				<el-table-column prop="note" label="备注"></el-table-column>

				<el-table-column label="操作" width="160" align="center">
					<template #default="{row}">
						<el-button link type="primary" :icon="Edit" @click="handleDetail(row.id)">详单</el-button>
						<el-button link type="danger" :icon="Delete" class="red" @click="handleDelete(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页组件 -->
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:total="totalCount"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>
		<!-- 详情弹出框 -->
		<order-detail v-if="detailDialogVisible" ref="detailDialogRef"></order-detail>
	</div>
</template>

<script setup>
import * as OrderAPI from '@/api/order.js';
import OrderDetail from './components/OrderDetail.vue';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Switch, Edit, Delete } from '@element-plus/icons-vue';

const dataList = ref([]); //列表数据

const query = reactive({
	keyword: '',
	pageIndex: 1,
	pageSize: 10,
	orderBy: 'id'
}); // 分页查询参数

const totalCount = ref(0); //总记录数
const exportLoading = ref(false); //导出,还没实现
const detailDialogVisible = ref(false); //详情框是否显示
const detailDialogRef = ref(null);

// 获取列表数据
const loadDataList = async () => {
	let result = await OrderAPI.queryPage(query);
	dataList.value = result.data.list; //返回数据结构参见API文档
	totalCount.value = result.data.totalCount;
};

// 执行获取数据
loadDataList();

// 触发搜索按钮
const handleSearch = () => {
	query.pasgeIndex = 1;
	loadDataList();
};

// 触发导出按钮
const handleExport = () => {
	ElMessage('导出，待完成...');
};

// 详单操作，id为记录的ID
const handleDetail = async id => {
	detailDialogVisible.value = true;
	await nextTick();
	detailDialogRef.value.init(id);
};

// 删除操作
const handleDelete = id => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(async () => {
		// 选择了确认，则删除后端数据库中的记录
		await OrderAPI.deleteById(id);
		loadDataList(); //同步列表中的记录
		ELMessage.success('删除成功');
	});
};

// 分页导航=======================================
const handlePageChange = val => {
	query.pageIndex = val;
	loadDataList();
};
</script>

<style scoped></style>
